<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <title>策略模式-实现表单验证</title>
</head>
<style lang="css">
</style>

<body>
    <p>策略模式适用于：需要各种不同的规则，并且随时可替换规则，并且最终目的一致的场景，正如表单验证</p>
    <form action="http:// xxx.com/register" id="registerForm" method="post">
        请输入用户名：
        <input type="text" name="userName" /> 请输入密码：
        <input type="text" name="password" /> 请输入手机号码：
        <input type="text" name="phoneNumber" />
        <button>提交</button>
    </form>

    <script type="text/javascript">
        var registerForm = document.getElementById('registerForm');
        registerForm.onsubmit = function () {
            if (registerForm.userName.value === '') {
                alert('用户名不能为空');
                return false;
            }
            if (registerForm.password.value.length < 6) {
                alert('密码长度不能少于 6 位');
                return false;
            }
            if (!/(^1[3|5|8][0-9]{9}$)/.test(registerForm.phoneNumber.value)) {
                alert('手机号码格式不正确');
                return false;
            }
        }
    </script>

</body>

</html>